<template>
    <div class="app-container">

        <!--查询表单-->
        <div class="search-div">
            <el-form label-width="70px" size="small">
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="角色名称">
                        <el-input style="width: 100%" v-model="searchObj.roleName" placeholder="角色名称"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row style="display:flex">
                    <el-button type="primary" icon="el-icon-search" size="mini"  @click="fetchData()">搜索</el-button>
                    <el-button icon="el-icon-refresh" size="mini" @click="resetData">重置</el-button>
                </el-row>
            </el-form>
        </div>

        <!-- 工具条 -->
        <div class="tools-div">
            <el-button type="success" icon="el-icon-plus" size="mini" @click="addRole">添 加</el-button>
            <el-button class="btn-add" size="mini" @click="batchRemove()" >批量删除</el-button>
        </div>

        <!-- 表格 -->
        <el-table
            v-loading="listLoading"
            :data="list"
            stripe
            border
            style="width: 100%;margin-top: 10px;"
            @selection-change="handleSelectionChange">
            <!-- 表格复选框 -->
            <el-table-column type="selection"/>

            <el-table-column
                label="序号"
                width="70"
                align="center">
                <template slot-scope="scope">
                {{ (page - 1) * limit + scope.$index + 1 }}
                </template>
            </el-table-column>

            <el-table-column prop="roleName" label="角色名称" />
            <el-table-column prop="roleCode" label="角色编码" />
            <el-table-column prop="createTime" label="创建时间" width="160"/>
            <el-table-column label="操作" width="200" align="center">
                <template slot-scope="scope">
                    <el-button type="primary" icon="el-icon-edit" size="mini" @click="editRole(scope.row.id)" title="修改"/>
                    <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeDataById(scope.row.id)" title="删除"/>
                    <el-button type="warning" icon="el-icon-baseball" size="mini" @click="showAssignAuth(scope.row)" title="分配权限"/>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页组件 -->
        <el-pagination
            :current-page="page"
            :total="total"
            :page-size="limit"
            style="padding: 30px 0;text-align: center;"
            layout="total, prev, pager, next, jumper"
            @current-change="fetchData">
        </el-pagination>

        <!-- dialog弹框 -->
        <el-dialog title="添加/修改" :visible.sync="dialogVisible" width="40%" >
          <el-form ref="dataForm" :model="sysRole" label-width="150px" size="small" style="padding-right: 40px;">
            <el-form-item label="角色名称">
              <el-input v-model="sysRole.roleName"/>
            </el-form-item>
            <el-form-item label="角色编码">
              <el-input v-model="sysRole.roleCode"/>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false" size="small" icon="el-icon-refresh-right">取 消</el-button>
            <el-button type="primary" icon="el-icon-check" @click="saveOrUpdate()" size="small">确 定</el-button>
          </span>
        </el-dialog>
    </div>
</template>
<script>
//引入定义的js文件
import api from '@/api/role/role.js'

export default {
    //定义初始值
    data(){
        return {
            dialogVisible: false,//是否弹框
            listLoading: true,//是否显示加载
            list:[],//角色列表
            total:0,//总记录数
            page: 1,//当前页
            limit: 3,//每页显示的记录数
            searchObj:{},//条件查询封装的对象
            sysRole:{},//封装添加表单数据
            selectValueArr:[],//复选框多选存储封装的数据
        }
    },
    //页面渲染之前执行
    created(){
        //调用列表方法
        this.fetchData(1)
    },
    methods:{ //具体方法
        //条件查询分页列表方法
        fetchData(pageNum=1){
    
            this.page = pageNum;
            //ajax
            api.getPageList(this.page,this.limit,this.searchObj)
            .then(response=> {
                this.listLoading = false;
                //数据列表
                this.list = response.data.records;
                //总数
                this.total = response.data.total;
            })
        },
        //重置
        resetData(){
            //清空表单
            this.searchObj = {}
            //查询数据
            this.fetchData()
        },
        //删除角色
        removeDataById(id){
            this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                //发ajax请求
                api.removeId(id).then(response => {
                    //提示
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    //刷新页面
                    this.fetchData()
                })
            });
        },
        //添加角色
        addRole(){
            //弹框
            this.dialogVisible =true
            this.sysRole = {}
        },
        editRole(id){
            api.findRoleById(id).then(response => {
                this.sysRole = response.data;
                //弹框
                this.dialogVisible =true
            })
            
        },
        //提交新增或编辑
        saveOrUpdate(){
            if(!this.sysRole.id){
                this.saveRole()
            }else{
                this.updateRole()
            }
        },
        saveRole(){
            api.saveRole(this.sysRole).then(response =>{
                //提示
                this.$message({
                    type: 'success',
                    message:'添加成功!'
                })
                //关闭弹框
                this.dialogVisible = false;
                //刷新页面
                this.fetchData();
            })
        },
        updateRole(){
            api.updateRole(this.sysRole).then(response => {
                //提示
                this.$message({
                    type: 'success',
                    message:'修改成功!'
                })
                //关闭弹框
                this.dialogVisible = false;
                //刷新页面
                this.fetchData();
            })
        },
        //复选框发生变化就会被触发
        handleSelectionChange(selection){
            this.selectValueArr = selection;
        },
        //批量删除角色
        batchRemove(){
            if(this.selectValueArr.length == 0){
                this.$message.warning('请选择需要删除的记录')
                return
            }

            this.$confirm('此操作将永久删除这些角色, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let idList = []
                for(var i = 0;i < this.selectValueArr.length;i++){
                    var obj = this.selectValueArr[i]
                    idList.push(obj.id)
                }
                //发ajax请求
                api.batchRemove(idList).then(response => {
                    //提示
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    //刷新页面
                    this.fetchData()
                })
            });
        },
        //分配权限
        showAssignAuth(row){
            //页面跳转
            this.$router.push('/system/assignAuth?id=' + row.id + '&roleName=' + row.roleName);
        },
    }
}
</script>